<template>
  <div class="user-manage">
    <div class="query-form">
      <el-form ref="form" :inline="true" :model="queryForm">
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="queryForm.menu_name" style="width:200px;" clearable placeholder=""/>
        </el-form-item>
        <el-form-item label="菜单路径" prop="menu_uri">
          <el-input v-model="queryForm.menu_uri" style="width:300px;" clearable placeholder=""/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getMenuList">查询</el-button>
          <el-button @click="handleRest('form')">重置</el-button>
          <el-button @click="handleAdd(1)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <el-table :data="menuList" empty-text="无数据" row-key="menu_id"  border lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" >
        <el-table-column label="菜单名称" prop="menu_name"  width="200"/>
        <el-table-column label="路径" prop="menu_uri" />
        <el-table-column label="类型" prop="menu_type"  width="60">
          <template #default="scope">
            <span v-if="scope.row.menu_type === 1">目录</span>
            <span v-if="scope.row.menu_type === 2">菜单</span>
            <span v-if="scope.row.menu_type === 3">按钮</span>
          </template>
        </el-table-column>
        <el-table-column label="图标" prop="menu_icon" width="60">
          <template #default="scope">
            <el-icon v-if="scope.row.menu_icon" :class="scope.row.menu_icon"><component :is="scope.row.menu_icon"></component>
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column label="序号" prop="menu_order" width="80"/>
        <el-table-column label="操作" align="center" prop="op" >
          <template #default="scope">
            <el-button @click="handleAdd(2,scope.row)" size="small">新增</el-button>
            <el-button @click="handleEdit(scope.row)" size="small">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(scope.row.menu_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :title="title" v-model="showModal" width="500">
      <el-form
          ref="dialogForm"
          :model="menuForm"
          label-width="100px"
          :rules="rules">
        <el-form-item label="父级菜单" prop="pid">
          <el-tree-select ref="tree" placeholder=""
                          v-model="menuForm.pid"
                          :data="menuList" accordion :expand-on-click-node="false"
                          node-key="menu_id" :props="treeSelectProp" :check-on-click-node="true"
                          clearable check-strictly
          />
          <span>不选，则直接创建一级菜单</span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menu_type">
          <el-radio-group v-model="menuForm.menu_type">
            <el-radio :label="1">目录</el-radio>
            <el-radio :label="2">菜单</el-radio>
            <el-radio :label="3">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menu_name">
          <el-input v-model="menuForm.menu_name" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menu_icon" >
          <el-select v-model="menuForm.menu_icon" filterable placeholder="请选择图标">
            <el-option v-for="item in iconList" :key="item" :label="item" :value="item">
              <span style="float: left">
                <el-icon :class="item"><component :is="item"></component>
                </el-icon>
              </span>
              <span style="float: right; color: var(--el-text-color-secondary);font-size: 13px; " >
                {{ item }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路由地址" prop="menu_uri">
          <el-input v-model="menuForm.menu_uri" placeholder="请输入路由地址"/>
        </el-form-item>
        <el-form-item label="菜单序号" prop="menu_order">
          <el-input-number v-model="menuForm.menu_order" :step="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>

</template>

<script>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export default {
  name: "menu",
  data(){
    let iconList = [];
    for (const [key] of Object.entries(ElementPlusIconsVue)) {
      iconList.push(key)
    }
    return {
      queryForm:{
        pageNum:1,
        pageSize:15,
        menu_uri:'',
        menu_name:''
      },
      iconList: iconList,
      menuList: [],
      columns:[
        {
          label:'菜单名称',
          prop:'menu_name',
          width:180
        },
        {
          label:'图标',
          prop:'menu_icon',
          width:130
        },
        {
          label:'菜单类型',
          prop:'menu_type',
          width: 90,
          formatter(row, column, value) {
            return {
              1: "菜单",
              2: "按钮"
            }[value]
          }
        },
        {
          label:'路由地址',
          prop:'menu_uri'
        }
      ],
      showModal:false,
      menuForm:{
        menu_id:'',
        menu_type:1,
        menu_order:1,
      },
      treeSelectProp:{value:'menu_id',label:'menu_name',children:'children'},
      action: "",
      title:'',
      rules:{
        menu_name:[
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur"
          },
          {
            max: 16,
            message: "长度在16个字符内",
            trigger: "blur"
          }
        ]
      }
    }
  },
  mounted() {
    this.getMenuList()
  },
  methods:{
    // 菜单列表初始化
    async getMenuList(){
      try {
        let res = await this.$api.getMenuList(this.queryForm)
        if(res.code === 200){
          this.menuList = res.data
        }
      } catch (e) {
        throw new Error(e)
      }
    },
    // 表单重置
    handleRest(form){
      this.$refs[form].resetFields()
    },
    // 新增
    handleAdd(){
      this.action = 'add'
      this.title = '新增';
      this.getMenuTreeSelect();
    },
    // 修改
    handleEdit(row){
      this.action = "edit"
      this.title = '修改';
      this.$nextTick(()=>{ // 在dom更新过后下一个阶段，下一次更新才获取值
        Object.assign(this.menuForm,row)
        this.getMenuTreeSelect();
      })
    },
    getMenuTreeSelect(){
      var that = this;
      that.$api.getMenuListAll().then(r=>{
        if(r.code === 200){
          that.menuList = r.data
          this.showModal = true
        }
      });
    },
    async handleDel(_id){
      await this.$api.menuDelSubmit(_id)
      this.$message.success('删除成功')
      this.getMenuList()
    },
    // 菜单操作提交
    handleSubmit(){
      this.$refs.dialogForm.validate(async (valid)=>{
        if (valid) {
          let { action, menuForm } = this
          let param = { ...menuForm, action }
          let res;
          if(action === 'add'){
            res = await this.$api.menuSaveSubmit(param)
          }else if(action === 'edit'){
            res = await this.$api.menuUpdateSubmit(param)
          }
          if(res.code === 200){
            this.showModal = false
            this.$message.success(res.msg)
            this.handleRest('dialogForm')
            this.getMenuList()
          }else{
            this.$message.error(res.msg)
          }

        }
      })
    },
    // 弹框关闭
    handleClose(){
      this.showModal = false
      this.handleRest('dialogForm')
    }
  }
}
</script>

<style lang="scss">

</style>
